<template>
  <div class="" id="Bar"></div>
</template>

<script lang="ts" setup>
  import api from '../api'
  import ec from '@/utils/chart'
  const { drawChart } = ec()
  const store = useStore()
  const { proxy } = getCurrentInstance()
  let exposeRef = $ref()
  let data = $ref([])
  let attr = $ref({min: 0, max: 100, dw: '%', legendArr: ['柱状图'], this: {id: 1, name: '柱状图'}})

  // 初始化
  onMounted(async() => {
    await init()
    // setTimeout(() => {
    //   attr.max = 200
    //   setChart()
    //   // data = [
    //   //   {data: [[0,0],[10,10],[20,20],[30,30],[40,40],[50,50]]}
    //   // ]
    // }, 5000);
  })

  // 监控
  watch([()=>data], async(val) => {
    await nextTick()
    setChart()
  }, {immediate: false, deep: true})

  // 请求
  const init = async() => {
    data = [
      {data: [[0,0],[10,10],[20,20],[30,30],[40,40],[50,50],[60,60],[70,70],[80,80],[90,90],[100,100]]}
    ]
  }

  // 绘制
  const setChart = async() => {
    drawChart('Bar', 'Bar', attr, data)
  }
</script>
  
<style scoped lang="scss">

</style>
  